HOWTO: Create image submit button

Very useful. I was about to dig in and do the same but you saved me some time, thanks!

One note -- if you're trying to replace the 'search' button in the side block as I was, you want to implement function phptemplate_search_block_form($form) rather than the function you have in the first block of code above.

Implimented this solution and had a custom search button image which seemd like all was well but then found I could no longer post any data for new pages or edit existing pages. When page is submitted nothing happens but the search does work . :-(

Any ideas???

Exactly what I wanted to achieve and I was half-way there in a similar fashion till I came across your much neater #button_type work-around.

I agree that this is the "right" way to work around what feels like and oversight in core. Much better than CSS hacks.

Thanks for posting.

Thanks for this. I've almost got it working, but I'm getting two buttons in the code, the new graphic one and the old grey one. FWIW they both work. What am I missing?

I'm doing this to a webform if that makes a difference.

This works fine in my 5.0 installation after addressing one minor change - form_render has been deprecated (in the sense of 'removed') in favour of drupal_render (as mentioned here: http://drupal.org/node/107459).

So the phptemplate_search_theme_form function I have in my template.php file right now is as follows:

function phptemplate_search_theme_form($form) {
  $form['submit']['#theme'] = 'button';
  $form['submit']['#button_type'] = 'image';
  $form['submit']['#attributes'] = array(
    'src' => base_path() . path_to_theme() . '/images/btn_search.png',
    'alt' => t(Search)
  );
  return drupal_render($form);
}

When overriding the button function I was no longer able to expand any of the fieldsets of options for a node when in edit mode (at least in 5.x). The issue is that the overridden buttons are missing the id attribute which is required by the drupal/upload javascript files for the upload button (attach-button). Minor addition below (added the id attribute) fixed it.

function phptemplate_button($element) {
  // following lines are copied directly from form.inc core file:

  //Make sure not to overwrite classes
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }

  // here the novelty begins: check if #button_type is normal submit button or image button
  $return_string = '<input ';
  if ($element['#button_type'] == 'image') {
    $return_string .= 'type="image" ';
  }
  else {
    $return_string .= 'type="submit" ';
  }
  $return_string .= (empty($element['#id']) ? '' : 'id="'. $element['#id'] .'" ');
  $return_string .= (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ');
  $return_string .= 'value="'. check_plain($element['#value']) .'" ';
  $return_string .= drupal_attributes($element['#attributes']) ." />\n";
  
  return $return_string;
}

PS Thanks for the original code Borek!

I added both of the noted functions to template.php, but I recevie an error message saying the form_render() is undefined. Any thoughts?

Thanks,
Andrew

Parse error: parse error, unexpected T_VARIABLE in the line

  $form['submit']['#theme'] = 'button';

I tried also with another name instead of 'submit' but the same problem...

Why? (sorry! no idea of PHP but a master on copy-paste ...)

I have Druapl 5.1

psc

Hope you all don;t mind but I found this so incredibly useful that I added it to the snippets library so others would be more readily able to find it and make use of it:

http://drupal.org/node/144758

Sean Robertson
webolutionary@webolutionary.com

This is a great snippet.

Agree, this functionality should be in core.

Thanks also to kingandy's comment.

I did this instead on the output form returned,

$myVariable = str_replace('type="submit"', 'type="image"', str_replace('value="Send"', 'src="files/myimage.gif"', my_form() ) );

much easier, even though I have to admit it is a shortcut and I don't know about the efficiency when there's a lot of users...

Anyone achieve to make this work in IE? After pressing the submit image button, it didn´t work in this explorer (it only returns to the same comment page). Any idea? Thanks in advance, Simon.

I wanted to do the same for one of our sites recently and realized the non-trivial size of the task as well. I decided to handle this on the completely other end (via CSS) - but I do wish I'd seen this thread first.

Big picture - both the search text field and the search button needed to be styled. The text field had an odd background (rounded corners and a slight gradient). The search button was a magnifying glass (or some such thing). The following CSS accomplished it in Win IE6, IE7, Firefox 2 and Mac Firefox 2 and Mac Safari 3 (currently in beta). Mac Safari 2 doesn't allow real styling of buttons, but as our site is under development and Safari 3 solves it, we're considering this a sufficient solution (and I like anything that can keep us from fiddling with php - better upgrade paths, etc.)

So - here's the CSS I put together:

#search {
  background-image: url(images/search_background.gif); /* the fancy-looking text input - rounded corners and gradient */
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: left center;
   width: 208px; /* arbitrary - what was necessary for our images to line up */
  text-align: left; /* see above */
}
#search-theme-form div { /* to deal with some IE6 stupidities - relevant because of the way our page lays out and possibly relevant for others */
  margin-right: 0; 
  padding-right: 0;
}
#search #edit-search-theme-form-keys { /* hide the text input box *
  border: none;
  background-color: transparent;
}
#search #edit-submit {  /* hide the search button and put in a fancy little image, instead */ 
  background-color: transparent;  /* hide standard button display stuff */
  border: none;	/* hide standard button display stuff */
  background-image: url(images/search_go_btn.gif); /* put in fancy image */
  background-repeat: no-repeat;
  vertical-align: middle;
  height: 25px; /* fancy image height */
  width: 25px; /* fancy image width */
  text-indent: 25px; /* move the 'Search' text on the button to the right */
  word-spacing: 10em; /* and space it out -- both of these shouldn't be necessary, but the combination makes all our browsers style this correctly */
  text-align: right; /* see above */
  cursor: pointer; /* make the mouse give the right feedback - IE stupidity, again */
}

Took some fiddling to get there, but it works... and it's a pure CSS solution - which means your php can remain untouched.

Drew Gorton
_{Gorton Studios
Some of our Drupal Sites}

Half a year later, I realise that this is what has caused my collapsible fieldsets to conflict with the inline upload functionality. Comparing it with the core theme_button() function, I've realised this code is neglecting to declare an id attribute in the returned input tag. The following code seems to function correctly:

function phptemplate_button($element) {
  // following lines are copied directly from form.inc core file:

  //Make sure not to overwrite classes
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }

  // here the novelty begins: check if #button_type is normal submit button or image button
  $return_string = '<input ';
  if ($element['#button_type'] == 'image') {
    $return_string .= 'type="image" ';
  }
  else {
    $return_string .= 'type="submit" ';
  }
  $return_string .= (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
  return $return_string;
}

--Andy
_{Developing Drupal websites for Livelink New Media}

Here's a version that looks for images based on the button's #value. This means it will display an image only if the theme has one, but not otherwise (i.e. if 'Submit' was translated to another language).

In this case the theme is called medemcom and images are in themes/medemcom/i/.

/**
 * Replace form submit buttons with images.
 * 
 * Looks for an image file named 'i/b_TITLE.gif', and if found, uses the image.
 */
function medemcom_button(&$element) {
  // Naming convention: images are stored in this theme's i/ directory.
  $filename = 'b_' . strtolower($element['#value']) . '.gif';
  $filepath = drupal_get_path('theme', 'medemcom') . '/i/'.$filename;
  
  if (file_exists($filepath)) {
	// This code based on theme_button from form.inc
	if (isset($element['#attributes']['class'])) {
	  $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
	}
	else {
	  $element['#attributes']['class'] = 'form-'. $element['#button_type'];
	}
	
	$output = '<input type="image" src="'. url($filepath) .'" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
  }
  else {
	$output = theme_button($element);
  }
  
  return $output;
}

#mybutton {
background:transparent url(images/mybutton.gif) no-repeat center;
border:none;
cursor:pointer;
font-size:0pt;
color: #ffffff
height:33px; /* or whatever */
width:94px; /* or whatever */
}

This is a presentation-layer problem, so solve it in the presentation layer -- leave your markup and php and modules and API's alone :)

My earlier approach had the shortcoming that on IE the value of the button was not submitted, and drupal failed to learn the $op of many form submits. (The shortcoming is in IE, not the technique itself). To work around IE's lameness, I'm now using a combination of themeing and javascript. Images are used in place of buttons only when javascript is enabled, and the theme function finds an image for the button in question.

First, the theme function renders both a button and an image. The image is set not to display:

/**
 * Replace form submit buttons with images.
 * 
 * Looks for an image file named 'i/b_TITLE.gif', and if found, uses the image.
 */
function phptemplate_button(&$element) {
  $text = str_replace(' ', '_', $element['#value']);
  // Naming convention: images are stored in this theme's i/ directory.
  $filename = 'b_' . strtolower($text) . '.gif';
  $filepath = drupal_get_path('theme', 'medemcom') . '/i/'.$filename;
  
  // Suppress this behavior on node forms because we dont have images
  // for all buttons
  if (file_exists($filepath)) {
    // Use the original button
	$button = theme_button($element);
	$image = '<input style="display: none;" type="image" src="'. 
	  base_path() . $filepath .'" name="'.$element['#name'] .'" id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'-image" '. drupal_attributes($element['#attributes']) ." />\n";
	// Render the image next to its button equivalent.  Hide the
	// image, it will be shown later only if javascript is enabled.
    $output = '<span class="buttonreplace">'. $button . $image . '</span>';
  }
  else {
	$output = theme_button($element);
  }
  return $output;
}

My theme includes some javascript on every page, and that javascript does two things. First, it hides the buttons and shows the images in their place. Second, when an image is clicked, it triggers the click event on the button. That way its as if the button was pressed, not the image, thus despite the efforts of the developers in Redmond, IE is bent to obey our will:

  /* Buttons are sometimes rendered with their image equivalent, but the image
   is hidden.  If javascript is enabled we can show the image and hide the
   button, then do some work when the click is done to make it work on IE. */
  $('span.buttonreplace input[@type=image]').show().
  click(function (e) {
      // Pass the click on to our button sibing.
      $(this).siblings().click();
      return false;
    });
  $('span.buttonreplace input[@type=submit]').hide().
  click(function (e) {
      // Pass the click on to the browser.
      this.click();
      return true;
    });

I recommend using this technique instead:

http://alligatorsneeze.com/node/943

Code Positive Limited
Drupal Developers & Consultants - London, UK

Miriam N.
Hi,

The replacement of the button with an image works perfectly to me,

BUT-

I have a submit function to my form and it hasn't been called! just the "form action" was performed..

What did I missed???

thank you,

Miriam

drupal 6 way:

http://drupal.org/node/316740

Hi,

It seems to be working except one thing. For some reasons I end up having two buttons, one is the type of image, the second is type of submit.

How to remove the default one and leave just the new image button in the form?

Thanks,
Dan

Hi,

It seems to be working except one thing. For some reasons I end up having two buttons, one is the type of image, the second is type of submit.

How to remove the default one and leave just the new image button in the form?

Thanks,
Dan

Hi,

I found a nice easy way was to do it on the form_alter and just use the markup instead:

$form['submit'] = array(
               '#type' => 'markup',
               '#value' => '<input type="image" name="submit" value="enter" src="/'. drupal_get_path('theme', 'myTheme').'/img/submit.jpg" alt="enter">'
             );

Not sure if this will be the case for everyone, but I found what the core problem was with this issue.

In typical HTML, you can customize a Form Submit Button a few ways. The default would be - type="submit" - followed by the method this thread addresses - type="image" - where you include the source of the image. If you look at the code in - system.module - you'll find where Drupal and developers weren't speaking the same language.

$type['submit'] = array('#input' => TRUE, '#name' => 'op', '#button_type' => 'submit', '#executes_submit_callback' => TRUE, '#process' => array('form_expand_ahah'));
  $type['button'] = array('#input' => TRUE, '#name' => 'op', '#button_type' => 'submit', '#executes_submit_callback' => FALSE, '#process' => array('form_expand_ahah'));
  $type['image_button'] = array('#input' => TRUE, '#button_type' => 'submit', '#executes_submit_callback' => TRUE, '#process' => array('form_expand_ahah'),

The third $type variable is where the problem is. For image submit buttons, Drupal was expecting me to set the button type to - "'#type' => 'image_button'" - where I was logically expecting to set the button type to - "'#type' => 'image".

So instead of setting my Image Submit Button Input Type to "image," I used "image-button" and all my problems were gone...well...not ALL...but the ones concerning input type image.

I also added the "name" attribute and value to that particularly problematic line of code. See below.

  $type['image_button'] = array('#input' => TRUE, '#name' => 'op', '#button_type' => 'submit', '#executes_submit_callback' => TRUE, '#process' => array('form_expand_ahah'),

I hope this helps someone else.

In order to not hack the core you just need to add the button theming as a theme function.

This way:

/**
 * Implementation of hook_theme().
 */
function mymodule_theme(&$existing, $type, $theme, $path) {
  $hooks = zen_theme($existing, $type, $theme, $path);
  $hooks['button'] = array('arguments' => array('element' => NULL),);

  return $hooks;
}

// This allows having an image button
function mymodule_button($element) {
  // following lines are copied directly from form.inc core file:

  //Make sure not to overwrite classes
  if (isset($element['#attributes']['class'])) {
........etc.... etc....

Hello everybody,

This will solve the issue. I have tried this in Drupal 6.19.

$form['submit_button'] = array(
	      '#type' => 'item',
	      '#name' => 'go',
	      '#id' => 'go',
	      '#title' => '',
	      '#value' => '<input type="image" name="go" src="'.$path.'/images/go.gif" onClick="return Validate(\'alert_name\',\'alert_email\');">'
	    );

This is a solution for Drupal 7. In my case it was to set the login button of the user login block to an image. Essential was to set the array value of #theme_wrappers to 'image_button' and to pass the complete $vars array to the render function otherwise you will have two buttons.

function THEME_theme($existing, $type, $theme, $path) {
  return array(
    'user_login_block' => array(
      'render element' => 'form',
    ),
  );
}

function THEME_user_login_block($vars) {
  $vars['form']['actions']['submit']['#theme_wrappers'] = array("image_button");
  $vars['form']['actions']['submit']['#button_type'] = "image";
  $vars['form']['actions']['submit']['#src'] = drupal_get_path('theme', 'THEME_NAME') . '/images/btn-login.png';
  return drupal_render_children($vars);
}

I use css to change the button
first added a div id to identify the button

$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Send'),
'#prefix' => '

',
);

then on the css I add the style of the buton

#contact_submit .form-submit{
background:url(images/button-submit.png) no-repeat;
height:34px;
width:129px;
border:none;
text-indent:-9999px;
cursor:pointer;
}

hope this help